<template>
	<view>
		<form @submit="formSubmit">
			<view>
				<view class="container-run">

					<!-- 填地址 -->
					<view class="address" @click="chooseLocation">
						<input type="text" class="inputAddress" placeholder="请输入地址"
							placeholder-class="placeholder-style" :value="localName" name="address">
					</view>
					<!-- 填信息 -->
					<view class="informations">
						<view class="informationsPick">
							<ul class="content">
								<li><text class="text-box">体积</text><input type="number" class="Vinput" :value="inpV"
										@input="onKeyInputV" name="tiJi"></li>
								<li><text class="text-box">快递点</text><input type="text" class="Vinput" :value="inpPos"
										@input="onKeyInputPos" name="kuaiDiDian"></li>
								<li><text class="text-box">快递公司</text>
									<input class="chooseCompany" @click="toggle('bottom')" disabled="true"
										:value="company" placeholder="请输入公司" placeholder-class="" name="company">
									<uni-popup ref="popup" background-color="#fff" @change="change">
										<ul class="companyTabGet">
											<li v-for="(item, index) in tabTxt" :key="item.id" @click="chooseCompany"
												:data-index="index">
												{{item.companyName}}
											</li>
										</ul>
									</uni-popup>

								</li>
								<li><text class="text-box">报酬</text>
									<view class="price">
										<text>￥</text>
										<input type="number" placeholder="0" class="inpPrice"
											placeholder-style="color:red;" :value="inputPrice" @input="onKeyInputPrice"
											name="price">
									</view>
								</li>
							</ul>
						</view>
					</view>
					<!-- 发送按钮 -->
					<button form-type="submit" class="map-icon" @click="toSet">
						<image :src="setImg" mode=""></image>
					</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	wx.cloud.init({
		env: 'klausjins-0go3socwd767ad11'
	})
	const db = wx.cloud.database()
	export default {
		name: "plusRun",
		data() {
			return {
				//页面类型，是talk，freetake，rent，run中的一个
				plus: 'run',
				//收件地址
				localName: '',
				//输入体积
				inpV: '',
				//输入快递点
				inpPos: '',
				//选择公司
				company: '',
				//输入价格
				inputPrice: '',
				//发送图标
				setImg: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png',
				//公司的图片和名字
				tabTxt: [{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/baishi.jpg',
						companyName: '百世快递'
					},
					{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/cainiao.jpg',
						companyName: '菜鸟'
					},
					{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/jd.jpg',
						companyName: '京东快递'
					},
					{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/shentong.jpg',
						companyName: '申通快递'
					},
					{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/shunfeng.png',
						companyName: '顺丰快递'
					},
					{
						img: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/courier company/zhongtong.jpg',
						companyName: '中通快递'
					}

				]
			};
		},
		methods: {
			formSubmit(res) {
				console.log(res);
			},
			change(e) {
				this.show = e.show
			},
			chooseLocation: function() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name != '') {
							that.localName = res.name;
						} else {
							that.localName = '你在哪里'
						}
					}
				});
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			onKeyInputPrice(e) {
				let text = e.detail.value;
				this.inputPrice = text;
				if (this.localName != '' && this.inpV != '' && this.inpPos != '' && this.company != '' && this
					.inputPrice != '') {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			onKeyInputV(e) {
				let text = e.detail.value;
				this.inpV = text
				if (this.localName != '' && this.inpV != '' && this.inpPos != '' && this.company != '' && this
					.inputPrice != '') {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			onKeyInputPos(e) {
				let text = e.detail.value;
				this.inpPos = text
				if (this.localName != '' && this.inpV != '' && this.inpPos != '' && this.company != '' && this
					.inputPrice != '') {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			filterTab(e) {
				if (this.showTag == false) {
					this.showTag = true
				} else {
					this.showTag = false
				}
			},
			chooseCompany(e) {
				var index = e.currentTarget.dataset.index;
				this.company = this.tabTxt[index].companyName;
				if (this.showTag == false) {
					this.showTag = true
				} else {
					this.showTag = false
				}
				if (this.localName != '' && this.inpV != '' && this.inpPos != '' && this.company != '' && this
					.inputPrice != '') {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
				this.close();
			},
			toSet: function() {
				var that = this;
				//点击发送图标后的事件
				// db.collection('plus_info').get().then(res => {
				// 	// res.data 包含该记录的数据
				// 	console.log(res.data)
				// })
				//先判断，有问题的就不能点，没问题就可以上传
				if (this.localName == '' && this.inpV == '' && this.inpPos == '' && this.company == '' && this
					.inputPrice == '') {
					uni.showToast({
						icon: "error",
						title: "请完善信息",
						duration: 2000
					})
				} else {

					//console.log( th.userInfo._openid );   
					//console.log(that.data.tempFilePaths);
					//处理结束后再把images赋给tempFilePathsClou
					//上传成功
					db.collection('plus_info').add({
						data: {
							plus: that.plus,
							localName: that.localName,
							inpV: that.inpV,
							inpPos: that.inpPos,
							company: that.company,
							inputPrice: that.inputPrice
						}
					}).then(res => {
						console.log(res);
						uni.showToast({
							title: "发布成功！",
							duration: 2000
						})
						setTimeout(function() {
							that.localName = '',
								that.inpV = '',
								that.inpPos = '',
								that.company = '',
								that.inputPrice = ''
							// wx.reLaunch({
							//   url: '在此处设置跳转页面,记得在250行结尾加逗号',
							// })
						}, 2000)
					})
				}

			},

		}
	}
</script>

<style lang="scss">
	.container-run {
		background-color: #fff;
		border-radius: 35rpx 35rpx 0 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		min-height: 95vh;

		.address {
			display: flex;
			justify-content: center;

			.inputAddress {
				border-radius: 60rpx;
				width: 700rpx;
				text-align: center;
				height: 60rpx;
				margin-top: 50rpx;
				background-color: #d8d8d8;
			}

			.placeholder-style {
				text-align: center;
				width: 700rpx;
			}
		}

		.informations {
			display: flex;
			justify-content: center;

			.informationsPick {

				width: 700rpx;
				height: 70vh;
				margin-top: 20rpx;
				background-color: #ececec;
				border-radius: 35rpx;

				.content {
					width: 700rpx;
					margin-top: 50rpx;

					li {
						display: flex;
						margin-bottom: 50rpx;
						justify-content: center;
					}

					text {
						display: flex;
						width: 200rpx;
						flex-wrap: nowrap;
						justify-content: center;
						font-size: 20px;
						font-weight: 600;
					}

					.Vinput {
						width: 400rpx;
						height: 60rpx;
						margin-left: 40rpx;
						background-color: #d8d8d8;
						border-radius: 60rpx;
						text-align: center;

					}

					.chooseCompany {
						width: 400rpx;
						height: 60rpx;
						margin-left: 40rpx;
						background-color: #d8d8d8;
						border-radius: 60rpx;
						text-align: center;
						line-height: 50rpx;

						.companyTab {
							display: flex;
							position: relative;
							width: 400rpx;
						}

					}

					.companyTabGet {
						background-color: #fff;
						padding-top: 20rpx;

						li {
							display: flex;
							text-align: center;
							height: 40rpx;
							align-items: center;
						}


					}

					.price {
						display: flex;
						width: 400rpx;
						height: 60rpx;
						font-size: 20px;
						font-weight: 600;
						color: red;
						text-align: center;
						margin-left: 40rpx;

						text {
							width: 20rpx;
							margin-right: 10rpx;
						}

						.inpPrice {
							width: 150rpx;
							display: flex;
							text-align: left;
							margin-top: 5rpx;
						}
					}
				}



			}
		}

		button {
			margin: 0;
			border: 0;
			height: 115rpx;
			padding: 0;
			background-color: #fff;
		}

		button::after {
			border: none;
		}

		.map-icon {
			display: inline;
			float: right;
			border: none;
			margin-right: 26rpx;
			margin-top: 25rpx;

			image {
				width: 108rpx;
				height: 108rpx;
				margin-top: 10rpx;

			}
		}

	}
</style>
